<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label="昵称">
            <el-input size="small" v-model="user.displayName" />
          </el-form-item>
          <el-form-item label="头像">
            <img :src="user.avatar" width="32" />
          </el-form-item>

          <el-button size="small" type="primary">注册</el-button>
        </el-form>
      </el-col>
    </el-row>
    <lemon-imui :user="user" ref="IMUI"  @pull-messages='handlePullMessages' @send="handleSend" />
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import LemonIMUI from 'lemon-imui';
import 'lemon-imui/dist/index.css';
Vue.use(LemonIMUI);

export default {
  name: 'testwebsocket',
  data(){
    return {
      user: {}
    }
  },
  methods: {
    handlePullMessages(contact, next) {
      //从后端请求消息数据，包装成下面的样子
      const messages = [{
        id: '唯一消息ID',
        status: 'succeed',
        type: 'text',
        sendTime: 1566047865417,
        content: '你什么才能对接完？',
        toContactId: contact.id,
        fromUser:this.user
      }]
      //将第二个参数设为true，表示已到末尾，聊天窗口顶部会显示“暂无更多消息”，不然会一直转圈。
      next(messages,true);
    },
    handleSend(message, next, file) {
      // ... 调用你的消息发送业务接口

      //执行到next消息会停止转圈，如果接口调用失败，可以修改消息的状态 next({status:'failed'});
      next();
    },
  },
  created() {
    // 初始化当前登录人
    this.user = {id:0,avatar: this.avatar, displayName: this.name}
  },
  mounted() {
    const { IMUI } = this.$refs;
    //从后端请求联系人数据，包装成下面的样子
    const contacts = [{
      id: 2,
      displayName: '丽安娜',
      avatar:'',
      index: 'L',
      unread: 0,
      //最近一条消息的内容，如果值为空，不会出现在“聊天”列表里面。
      //lastContentRender 函数会将 file 消息转换为 '[文件]', image 消息转换为 '[图片]'，对 text 会将文字里的表情标识替换为img标签,
      lastContent: IMUI.lastContentRender({type:'text',content:'你在干嘛呢？'}),
      //最近一条消息的发送时间
      lastSendTime: 1566047865417,
    }];
    IMUI.initContacts(contacts);
  },
  computed: {
    ...mapGetters([
      'avatar',
      'name'
    ])
  }
}
</script>

